<template>
  <div style="margin-top: 2vh">
    <div style="background-color: white; width: 68vw; margin: auto;">
      <!-- 上方标题 -->
      <div style="border-bottom: 1px solid #e9e9e9; height: 7vh; width: 100%;">
        <span style="font-weight: bold; font-size: 1.1rem; line-height: 7vh; margin-left: 1.5vw;">论文详情</span>
        <span style="color: #8c8c8c; line-height: 7vh; font-size: 0.8rem; font-weight: bold;margin-left: 2vh">重要信息: 封面 / 目录 / 文章 / 封底, 检索报告等。</span>
      </div>

      <pdf-preview :pdf-url="ruleForm.pdfPath"></pdf-preview>
    </div>

    <!-- 填写信息 -->
    <div style="background-color: white; width: 68vw; margin: auto; display: flex; flex-direction: column;padding-bottom: 5vh;margin-top: 3vh ">
      <div style="flex: 1;">
        <div style="border-bottom: 1px solid #e9e9e9;height: 7vh;">
          <span style="font-weight: bold;font-size: 1.1rem;line-height: 7vh;margin-left: 1.5vw">信息详情</span>
        </div>
        <div>
          <el-form :model="ruleForm"  ref="ruleFormRef" label-width="100px" style="margin-top: 5vh">
            <el-form-item label="论文标题" prop="title" required>
              <el-input v-model="ruleForm.title" placeholder="请填写标题" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="论文类型" prop="paperType" required>
              <el-radio-group v-model="ruleForm.paperType">
                <el-radio label="期刊论文"></el-radio>
                <el-radio label="会议论文集"></el-radio>
                <el-radio label="报纸"></el-radio>
                <el-radio label="学位论文"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="论文领域" prop="researchField">
              <el-radio-group v-model="ruleForm.researchField">
                <el-radio label="科研(社科)"></el-radio>
                <el-radio label="科研(自科)"></el-radio>
                <el-radio label="教育"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="本人排名" prop="authorRank" required>
              <el-select v-model="ruleForm.authorRank">
                <el-option label="无" :value="0"></el-option>
                <el-option v-for="i in 13" :key="i" :label="i.toString()" :value="i"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="通讯作者" prop="correspondingAuthor">
              <el-radio-group v-model="ruleForm.correspondingAuthor">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="刊物名称" prop="journalName" required>
              <el-input v-model="ruleForm.journalName" placeholder="如: 装饰" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="收录检索" prop="indexingList">
              <el-checkbox-group v-model="ruleForm.indexingList">
                <el-checkbox label="SCI"></el-checkbox>
                <el-checkbox label="SCIE"></el-checkbox>
                <el-checkbox label="SSCI"></el-checkbox>
                <el-checkbox label="ESCI"></el-checkbox>
                <el-checkbox label="自然指数杂志"></el-checkbox>
                <el-checkbox label="CSSCI"></el-checkbox>
                <el-checkbox label="CSSCI扩展版"></el-checkbox>
                <el-checkbox label="CSCD-C"></el-checkbox>
                <el-checkbox label="CSCD-E"></el-checkbox>
                <el-checkbox label="SCD"></el-checkbox>
                <el-checkbox label="AHCI"></el-checkbox>
                <el-checkbox label="EI"></el-checkbox>
                <el-checkbox label="CPCI-S (ISTP)"></el-checkbox>
                <el-checkbox label="CPCI-SSH (ISSHP)"></el-checkbox>
                <el-checkbox label="PKU (中文核心)"></el-checkbox>
                <el-checkbox label="科技核心"></el-checkbox>
                <el-checkbox label="国家级期刊"></el-checkbox>
                <el-checkbox label="省级期刊"></el-checkbox>
                <el-checkbox label="校内核心"></el-checkbox>
                <el-checkbox label="会议论文"></el-checkbox>
                <el-checkbox label="其它"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="发表时间" prop="publishDate" required>
              <el-date-picker
                  v-model="publishDateModel"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="DOI号" prop="doi">
              <el-input v-model="ruleForm.doi" placeholder="请输入DOI号" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="引用次数" prop="citationCount">
              <el-input v-model="ruleForm.citationCount" placeholder="请输入论文引用次数" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="关键词" prop="keywords">
              <el-input v-model="ruleForm.keywords" placeholder="如: 机器学习,生物化学" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="起止页码" prop="pageRange">
              <el-input v-model="ruleForm.pageRange" placeholder="如: 21~24" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="关联课题" prop="projectId">
              <el-input v-model="ruleForm.projectId" placeholder="请选择本ndnu-成果所属课题,以便使用结题助手功能" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="作者信息" prop="authorInfo">
              <div style="background-color: #f9f9f9;width: 55vw;height: auto;">
                <ul style="display: flex; list-style-type: none; padding: 0; margin: 0;line-height: 6vh;color: #3f3f3f">
                  <li style="margin-left: 1.5vw">排序</li>
                  <li style="margin-left: 3vw">姓名</li>
                  <li style="margin-left: 3.5vw">作者身份</li>
                  <li style="margin-left: 3.5vw">通讯作者</li>
                  <li style="margin-left: 3.5vw">共同一作</li>
                  <li style="margin-left: 5vw">单位名称</li>
                </ul>
                <div v-for="(author, index) in ruleForm.authorInfo" :key="index" style="margin-top: 1vh; display: flex; align-items: center;">
                  <el-select style="width: 4vw;" v-model="author.rank">
                    <el-option
                        v-for="item in rankOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                  <el-input v-model="author.name" style="width: 5vw; margin-left: 1vw"></el-input>
                  <el-select style="width: 5.5vw; margin-left: 1vw" v-model="author.identity">
                    <el-option
                        v-for="item in shipOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                  <el-checkbox style="margin-left: 3.5vw" v-model="author.isCorresponding"></el-checkbox>
                  <el-checkbox style="margin-left: 3.5vw" v-model="author.isCoFirstAuthor"></el-checkbox>
                  <el-input placeholder="单位名称" v-model="author.institution" style="width: 15vw; margin-left: 3vw"></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="影响因子" prop="impactFactor">
              <el-input v-model="ruleForm.impactFactor" placeholder="如: 3.102" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="卷号" prop="volumeNumber">
              <el-input v-model="ruleForm.volumeNumber" placeholder="如: 36" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="期号" prop="issueNumber">
              <el-input v-model="ruleForm.issueNumber" placeholder="如: 12" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="ISSN号" prop="issn">
              <el-input v-model="ruleForm.issn" placeholder="请输入ISSN号" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="CN号" prop="cnNumber">
              <el-input v-model="ruleForm.cnNumber" placeholder="请输入CN号" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="摘要" prop="abstractContent">
              <el-input type="textarea" :rows="4" v-model="ruleForm.abstractContent" placeholder="请输入摘要" style="width: 34vw;"></el-input>
            </el-form-item>
            <el-form-item label="备注信息" prop="remarks">
              <el-input type="textarea" :rows="4" v-model="ruleForm.remarks" placeholder="请输入备注信息" style="width: 34vw;"></el-input>
            </el-form-item>
          </el-form>
          <div style="display: flex;justify-content: center;margin-top: 2vh">
            <button @click="submit" class="upload-button" style="width: 10vw;">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

import {getPaperById} from "@/api/result/papers.js";
import PdfPreview from "@/components/result/PdfPreview.vue";
import {getProjectNameById} from "@/api/result/longitudinalProjects";
const router = useRouter()
const route = useRoute()
const ruleFormRef = ref(null)
const ruleForm = reactive({
  id: '',
  title: '',
  pdfPath: '',
  paperType: '',
  researchField: '',
  authorRank: 0,
  correspondingAuthor: false,
  journalName: '',
  indexingList: [],
  publishDate: '',
  doi: '',
  citationCount: null,
  keywords: '',
  pageRange: '',
  projectId: null,
  impactFactor: null,
  volumeNumber: null,
  issueNumber: null,
  issn: '',
  cnNumber: '',
  abstractContent: '',
  remarks: '',
  authorInfo: [{
    rank: '',
    name: '',
    identity: '',
    isCorresponding: false,
    isCoFirstAuthor: false,
    institution: ''
  }],
})

const publishDateModel = computed({
  get: () => ruleForm.publishDate,
  set: (value) => {
    ruleForm.publishDate = value
  }
})
const updatePdfPath = (newPath) => {
  ruleForm.pdfPath = newPath
}

const rankOptions = [
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
  { value: '5', label: '5' }
]

const shipOptions = [
  { value: '老师', label: '老师' },
  { value: '博士生', label: '博士生' },
  { value: '硕士生', label: '硕士生' },
  { value: '本科生', label: '本科生' },
  { value: '博士生', label: '博士生' },
  { value: '硕士生', label: '硕士生' },
  { value: '本科生', label: '本科生' },
  { value: '其它', label: '其它' }
]


onMounted(async () => {
  const paperId = route.query.id;
  if (paperId) {
    try {
      const res = await getPaperById(paperId);

      if (res.code === 200 && res.data) {

        // 填充论文信息
        Object.assign(ruleForm, res.data);


      } else {
        ElMessage.error('获取论文信息失败');
      }
    } catch (error) {
      console.error('获取论文信息出错:', error);
      ElMessage.error('获取论文信息失败，请重试');
    }
  }
})

</script>

<style scoped>
.upload-button {
  color: white;
  height: 3.8vh;
  width: 6.5vw;
  background-color: #00b38a;
  cursor: pointer;
  border: none;
}

.upload-button:hover {
  background-color: #009b77;
}

canvas {
  display: block;
  margin: 0 auto;
  background: white;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  transform-origin: top center;
}

.header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.thumbnail-wrapper canvas {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.thumbnail-wrapper:hover .delete-btn {
  opacity: 1;
}

.toolbar button {
  padding: 0.5rem;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: #4b5563;
}

.toolbar button:hover {
  background: #f3f4f6;
}

.toolbar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.canvas-container canvas {
  background: white;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  transform-origin: top center;
}
</style>
